<template>
    <div>
        <h1>一级分类管理</h1>
        <div>
            <el-button @click="addLevel1BtnHandler()" type="success">
                增加一级分类
            </el-button>
        </div>

        <!-- 列表循环 -->
        <draggable v-model="level1Arr" @end="sortEndHandler($event)">
            <div class="item_div" v-for="item in level1Arr" :key="item.id" :data-id="item.id">
                <div class="left">
                    {{ item.text }} （含{{ item.childrenCount }}个二级子类）
                </div>

                <div class="right">
                    <!-- 红色的删除按钮 -->
                    <el-popconfirm title="确定删除一级分类么？" @confirm="delConfirmHandler(item.id)">
                        <el-button type="danger" size="mini" slot="reference">
                            删除
                        </el-button>
                    </el-popconfirm>

                    <!-- 蓝色的修改名称按钮 -->
                    <el-button type="primary" size="mini" style="margin-left: 10px" @click="modifyBtnHandler(item)">
                        修改名称
                    </el-button>

                    <!-- 绿色的修改二级、三级子分类按钮 -->
                    <el-button type="success" size="mini" style="margin-left: 10px" @click="level23BtnHandler(item.id)">
                        修改二级、三级子分类
                    </el-button>
                </div>
            </div>
        </draggable>

        <!-- 对话框，一框两用：增加一级分类、修改一级分类 -->
        <el-dialog :title="nowModify == -1 ? '增加一级分类' : '修改一级分类'" :visible.sync="dialogVisible" width="30%"
            :close-on-click-modal="false">
            <!-- 对话框的内容，就一个文本框 -->
            <el-input v-model="nameInputValue" />
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogOkHandler()"> 确 定 </el-button>
            </span>
        </el-dialog>

        <!-- 管理二三级分类的对话框 -->
        <el-dialog title="管理二三级分类" :visible.sync="level23DialogVisible" width="1000px" :close-on-click-modal="false"
            destroy-on-close>
            <!-- 对话框内部是一个组件，组件的好处就是能够将复杂内部独立的思考、实现 -->
            <Level23DialogInner :parentId="nowLevel1Id" v-if="level23DialogVisible" />

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="level23DialogVisible = false"> 确 定 </el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
// 引用Ajax文件
import {
    getCategoryLevel1,
    delLevel1,
    addLevel1,
    modifyLevel1Name,
    sortLevel1,
} from "@/api/category.js";

import Level23DialogInner from "./Level23DialogInner.vue";

import draggable from "vuedraggable";

export default {
    components: {
        draggable,
        Level23DialogInner,
    },
    // 组件创建好之后
    created() {
        this.loadData();
    },
    data() {
        return {
            level1Arr: [],
            dialogVisible: false,
            // 弹出层中的输入框，双向绑定的值
            nameInputValue: "",
            // 改的是谁。如果是增加，就是-1
            nowModify: -1,
            // 管理二三级分类的对话框
            level23DialogVisible: false,
            // 当前正在修改的一级分类id
            nowLevel1Id: "",
        };
    },
    methods: {
        // 删除
        async delConfirmHandler(id) {
            const data = await delLevel1(id);

            if (data.info == "删除成功") {
                this.$message.success("删除成功");
            } else {
                this.$message.error("删除失败，请联系管理员");
            }

            this.loadData();
        },
        // 拉取数据
        async loadData() {
            // 拉取一级数据
            const data = await getCategoryLevel1();
            this.level1Arr = data;
        },
        // 增加一级分类，绿色按钮
        addLevel1BtnHandler() {
            // 让nowModify值为-1，一筐两用。
            this.nowModify = -1;
            // 对话框显示
            this.dialogVisible = true;
        },
        // 点击弹出层的确定按钮，做的事情
        async dialogOkHandler() {
            if (this.nowModify == -1) {
                // 发出Ajax请求，
                const data = await addLevel1({ text: this.nameInputValue });
                if (data.info == "增加一级分类成功") {
                    this.$message.success("增加一级分类成功");
                } else {
                    this.$message.error("增加一级失败，请联系管理员");
                }
            } else {
                // 发出Ajax请求，
                const data = await modifyLevel1Name({
                    text: this.nameInputValue,
                    id: this.nowModify,
                });
                if (data.info == "修改成功") {
                    this.$message.success("修改一级分类成功");
                } else {
                    this.$message.error("修改一级失败，请联系管理员");
                }
            }

            this.loadData();
            this.dialogVisible = false;
        },
        // 点击修改按钮做的事情
        modifyBtnHandler(item) {
            // 我们的收货地址业务，nowModify存储的是下标，这里存储的是id。
            // 存什么要看业务
            this.nowModify = item.id;
            // 弹出层文本框的默认值
            this.nameInputValue = item.text;
            // 对话框显示
            this.dialogVisible = true;
        },
        // 拖拽排序结束做的事情
        async sortEndHandler(e) {
            let newindex = e.newIndex;
            let oldindex = e.oldIndex;
            let level1id = e.item.dataset.id;
            const data = await sortLevel1({ newindex, oldindex, level1id });

            if (data.info == "修改一级排序成功") {
                this.$message.success("修改一级排序成功");
            } else {
                this.$message.error("修改一级排序失败");
            }
        },
        // 绿色的“修改二级、三级子分类”
        level23BtnHandler(id) {
            // 设置nowLevel1Id
            this.nowLevel1Id = id;

            // 显示对话框
            this.level23DialogVisible = true;
        },
    },
};
</script>
  
<style lang="less" scoped>
.item_div {
    font-size: 16px;
    line-height: 30px;
    display: flex;

    .left {
        width: 300px;
    }
}
</style>